<template>
  <section class="login">
    <alert v-if="message" v-text="message"></alert>
     <article class="log-box">
       <header>
         <md-avatar class="md-large">
           <img src="../../../static/images/timg.jpg" alt="People">
         </md-avatar>
       </header>
       <article class="log-body">
           <section>
             <p>用户名:</p>
             <input type="text" placeholder="" v-model="username"/>
           </section>
         <section>
           <p>密码:</p>
           <input type="password" placeholder="" v-model="password"/>
         </section>
         <section>
          <!-- <input v-on:keyup.13 = "doLogin($event)" type="button" value="提交"  />-->
           <md-button  style="width: calc(100% - 16px)" @click="login" class="md-raised md-warn">登录</md-button><!--href="/home/recommend"-->
         </section>
       </article>
     </article>
  </section>
</template>
<script>
  import Alert from '../alert/alert.vue'

  export default {
    name: 'login',
    data() {
      return {
        username: '',
        password: '',
        message: ''
      }
    },
    methods: {
      login() {
        if (this.username == 'admin' && this.password == "123") {
          this.$router.push("/home/recommend")
        }
        else if (!this.username || !this.password) {
          this.message = "登录信息不能为空！";
          setInterval(() => {
            this.message = ""
          }, 3000)
        }
        else {
          this.message = "用户名密码错误!";
        }
      }
    },
      components: {
        Alert
      }

  }
</script>
<style scoped="">
  html,body{
    width: 100%;
    height: 100%;
  }
  p{
    margin: 0;
    padding: 0;
  }
   .login{
     width: 100%;
     height: 100%;
     position: absolute;
     top:0;
     left: 0;
     bottom: 0;
     right: 0;
     background: url("../../../static/images/53.jpg");
     background-size: 100% 100%;
     overflow: hidden;
   }
  .log-box{
    width: 300px;
    height:100%;
    position: absolute;
    margin-top: 150px;
    margin-left: 40px;
  }
  .log-box>header{

    text-align: center;
  }
  .log-body{
    width: 300px;
    margin-top: 10px;
    background: rgba(0,0,0,0.1);
  }
  .log-body>section{
    padding: 8px;
  }
  .log-body>section>p{
    font-size: 18px;
    margin: 10px 0;

  }
  .log-body>section>input{
    width: 100%;
    padding: 10px;
    border: none;
    background: rgba(0,0,0,0.1);
    outline: none;
  }
  .log-body>section>a{
    width: calc(100% - 16px);
  }
</style>
